<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>融昌建材全产业链工作台</title>
    <link rel="icon" href="images/icon.png">
    <link rel="stylesheet" type="text/css" href="css/header.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            position: relative;
            top: 270px;
        }

        .mainAdv img {
            width: 1180px;
            height: 370px;
            vertical-align: middle;
        }

        .mainAdvR {
            display: inline-block;
            margin-left: -5px;
            width: 310px;
            height: 370px;
            vertical-align: middle;
            position: relative;
            right: 0;
        }

        .mainAdvR-text {
            width: 335px;
            height: 290px;
            border-right: 1px solid #ccc;
        }

        .mainAdvR img {
            width: 335px;
            height: 80px;
            border-right: 1px solid #ccc;
        }

        .scrollText {
            text-align: center;
            overflow: hidden;
            height: 60px;
        }

        .scrollText ul {
            height: 60px;
        }

        .scrollText p {
            padding: 5px 0;
            font-size: 14px;
        }

        .mainAdv-btn {
            text-align: center;
            height: 75px;
            border-bottom: 1px solid #ccc;
        }

        .mainAdv-btn a {
            text-decoration: none;
            display: inline-block;
            width: 135px;
            height: 40px;
            line-height: 40px;
            margin: 10px;
            background-color: rgb(75, 145, 225);
            color: white;
            border-radius: 5px;
        }

        .toutiao {
            width: 335px;
            height: 153px;
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            font-size: 14px;
            position: absolute;
        }

        .toutiao a {
            text-decoration: none;
        }

        .toutiao-btn {
            margin: 10px;
            display: inline-block;
            vertical-align: middle;
            width: 50px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            border: 1px solid rgb(190, 38, 38);
            border-radius: 5px;
            color: rgb(190, 38, 38);
        }

        .toutiao-showmore {
            color: rgb(75, 145, 225);
            display: inline-block;
            vertical-align: middle;
            position: absolute;
            top: 15px;
            right: 10px;
        }

        .toutiao li {
            width: 335px;
            margin: 10px;
        }

        .toutiao-date {
            position: absolute;
            right: 10px;
            color: #ccc;
        }

        .toolBox {
            width: 70px;
            height: 220px;
            position: fixed;
            right: 0;
            top: 500px;
            right: 3px;
            z-index: 1;
            /* background-color: rgb(255, 255, 255); */
        }

        .toolBox p {
            color: white;
            font-size: 12px;
            display: inline-block;
            margin: 5px 0;
        }

        .returntop {
            text-align: center;
            width: 66px;
            height: 40px;
            border: 1 solid #ccc;
            background-color: white;
            display: block;
        }

        .returntop:hover {
            cursor: pointer;
        }

        .returntop img {
            height: 25px;
            margin: 8px;
        }

        .cart {
            width: 59px;
            height: 61px;
            padding: 3px;
            margin: 10px 0;
            text-align: center;
        }

        .cart:hover {
            cursor: pointer;
        }

        .cart img {
            height: 25px;
            margin-top: 10px;
        }

        .qr {
            width: 58px;
            height: 70px;
            padding: 4px;
            margin: 10px 0;
            text-align: center;
            background-color: white;
        }

        .qr:hover {
            cursor: pointer;
        }

        .qr img {
            height: 30px;
            margin-top: 8px;
        }

        .download {
            display: inline-block;
            vertical-align: middle;
            position: relative;
            width: 200px;
            height: 180px;
            background-color: rgb(240, 240, 240);
            border: 1px solid grey;
        }

        .download p {
            position: relative;
            top: 10px;
            margin: 0 0 10px 10px;
        }

        .download img {
            position: relative;
            left: 80px;
            padding: 10px;
            width: 100px;
        }

        .ywdt {
            display: inline-block;
            width: 1313px;
            height: 181px;
            margin-left: -5px;
            vertical-align: middle;
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            position: relative;
        }

        .ywdt-title {
            width: 100%;
            height: 40px;
            padding-top: 10px;
        }

        .ruzhu {
            display: inline-block;
            vertical-align: middle;
            position: absolute;
            right: 180px;
        }

        .ruzhu img {
            width: 40px;
            display: inline-block;
            vertical-align: middle;
        }

        .ruzhu span {
            display: inline-block;
            vertical-align: middle;
            font-size: 18px;
            color: rgb(190, 38, 38);
        }

        #ljjr {
            text-decoration: none;
            display: inline-block;
            width: 135px;
            height: 40px;
            line-height: 40px;
            margin-left: 20px;
            background-color: rgb(190, 38, 38);
            color: white;
            border-radius: 5px;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
        }

        .ywdt li {
            margin-bottom: 15px;
        }

        .ywdt img {
            margin: -2px 5px;
        }

        .ywdt span {
            color: rgb(75, 145, 225);
        }

        .ywdt-contentL {
            display: inline-block;
            width: 45%;
            margin: 15px 10px;
        }

        .ywdt-contentR {
            display: inline-block;
            width: 45%;
            margin: 15px 10px;
        }

        .recommend,
        .information {
            width: 1515px;
            height: 640px;
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
        }

        .card {
            display: inline-block;
            vertical-align: middle;
            width: 480px;
            height: 620px;
            margin-right: 20px;
            box-shadow: 3px 3px 6px grey;
        }

        .cardTitle {
            height: 40px;
            line-height: 40px;
            padding-left: 10px;
            font-weight: bold;
            border-left: 5px solid rgb(75, 145, 225);
        }

        .card-banner {
            margin: 10px 15px;
            width: 450px;
            height: 100px;
            border-radius: 5px;
        }

        .card-img {
            width: 135px;
        }

        .service {
            text-align: center;
        }

        .serviceItem {
            display: inline-block;
            vertical-align: middle;
            margin: 0 30px 10px 30px;
        }

        .rankingItem {
            width: 100%;
            height: 135px;
            margin-bottom: 15px;
            position: relative;
        }

        .no {
            width: 45px;
            position: relative;
            left: 15px;
            display: inline-block;
            vertical-align: middle;
        }

        .material-img {
            width: 125px;
            padding: 0;
            position: relative;
            left: 30px;
            display: inline-block;
            vertical-align: middle;
        }

        .rankingItem-detail {
            display: inline-block;
            vertical-align: middle;
            height: 100%;
            width: 200px;
            position: relative;
            left: 50px;
        }

        .rankingItem-detail p {
            margin: 15px 0 20px 0;
        }

        .selectedItem {
            width: 135px;
            height: 200px;
            margin: 15px 0 0 15px;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
        }

        .selectedItem p {
            margin-bottom: 10px;
        }

        .selectedItem img {
            width: 120px;
        }

        .xxj {
            width: 540px;
            height: 340px;
            display: inline-block;
            vertical-align: middle;
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
        }

        .gcxx {
            width: 650px;
            height: 340px;
            display: inline-block;
            vertical-align: middle;
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            margin-left: -5px;
        }

        .gcxxItem span,
        img {
            display: inline-block;
            vertical-align: middle;
        }

        .gcxxItem span {
            margin: 10px;
        }

        .gcxxItem img {
            width: 30px;
        }

        .ptfwnr {
            width: 324px;
            height: 100%;
            float: right;
            /* display: inline-block;
            vertical-align:top; */
            margin-left: -5px;
        }

        .ptfwnr img {
            width: 175px;
            margin: 10px 80px;
        }

        .more {
            color: #CCC;
            cursor: pointer;
            float: right;
            margin: 10px;
        }

        .jcxy {
            width: 540px;
            height: 300px;
            display: inline-block;
            vertical-align: middle;
            border-right: 1px solid #ccc;
        }

        .zmpp {
            width: 300px;
            height: 300px;
            display: inline-block;
            vertical-align: middle;
            border-right: 1px solid #ccc;
            margin-left: -5px;
        }

        .qmjjr {
            width: 350px;
            height: 300px;
            display: inline-block;
            vertical-align: middle;
            border-right: 1px solid #ccc;
            margin-left: -5px;
        }

        table {
            width: 100%;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }

        td {
            border-bottom: 1px solid #ccc;
            border-left: 1px solid #ccc;
            padding: 6.5px;
        }

        .zixun {
            width: 1515px;
            height: 430px;
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
        }

        .changePage2 {
            width: 1515px;
            height: 45px;
            border-top: 1px solid #ccc;
        }

        .changePage2 span {
            height: 40px;
            width: 100px;
            margin: 0 10px;
            display: inline-block;
            text-decoration: none;
            font-size: 20px;
            font-weight: 300px;
            line-height: 40px;
            color: black;
            text-align: center;
        }

        .changePage2 span:hover {
            cursor: pointer;
        }

        .zixunBox {
            width: 100%;
            margin-top: 5px;
            height: 340px;
        }

        .jczx img {
            height: 150px;
            width: 280px;
            margin: 0 10px 20px 0;
            cursor: pointer;
        }

        .footer {
            position: relative;
            top: 700px;
            width: 1515px;
            height: 340px;
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
        }

        .link {
            height: 200px;
            width: 100%;
            background-color: #797979;
        }

        .linkItem {
            width: 220px;
            height: 170px;
            padding: 30px 0 0 50px;
            color: white;
            position: absolute;
        }

        .linkItem img {
            width: 30px;
            vertical-align: middle;
            margin-right: 5px;
        }

        .linkItem span {
            font-size: 20px;
            display: inline-block;
            vertical-align: middle;
        }

        .linkItem a {
            position: relative;
            left: 40px;
            text-decoration: none;
            font-size: 14px;
            margin: 10px 0;
            color: white;
        }

        .link2 {
            height: 120px;
            width: 1490px;
            padding: 15px;
        }

        .link2 a {
            text-decoration: none;
            margin: 5px;
            height: 20px;
            display: inline-block;
            color: #797979;
        }

        .rankingItem,
        .selectedItem,
        .serviceItem:hover {
            cursor: pointer;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>


<body>
    <div class="toolBox">
        <a class="returntop" style="border: 2px solid #bfbfbf;" href="#header">
            <img src="images/首页/返回顶部.png" alt="">
        </a>
        <div class="cart" style="border: 2px solid rgb(100, 180, 140);">
            <div style="background-color: rgb(253, 170, 15);border-radius: 5px;">
                <img src="images/首页/购物车.png" alt="">
                <p>购物车</p>
            </div>
        </div>
        <div class="qr" style="border: 2px solid #bfbfbf" ;>
            <div id="showQR">
                <img src="images/首页/二维码.png" alt="">
                <p style="color: #bfbfbf;">二维码</p>
            </div>
        </div>
    </div>
    <div class="header" id="header">
        <div class="headerTips">
            <div class="headerTipsL">
                <div class="beforeLogin">
                    <a href="login.html" id="login">请登录</a>
                    <a href="register.html" id="register">免费注册</a>
                </div>
                <div class="afterLogin">
                    <a style="color: black;" id="username">赵先生</a>
                    <img src="images/邮箱.png" alt="" style="cursor: pointer;">
                    <span id="exit"
                        style="cursor: pointer;color:rgb(75, 145, 225);font-size: 14px;margin-left: 20px;">退出</span>
                </div>
            </div>
            <div class="headerTipsR">
                <ul>
                    <div class="dropdown" id="dropdown1">
                        <a href="page/gdzx.html" class="dropbtn">工地中心<img src="images/down.png" alt=""></a>
                        <div class="dropdown-content" id="dropdown-content1">
                            <a href="#">我的订单</a>
                            <a href="#">我的合同</a>
                            <a href="#">我的消息</a>
                        </div>
                    </div>
                    <div class="dropdown" id="dropdown2">
                        <a href="#" class="dropbtn">OEM中心<img src="images/down.png" alt=""></a>
                        <div class="dropdown-content" id="dropdown-content2">
                            <a href="#">入驻平台</a>
                            <a href="#">我的任务</a>
                            <a href="#">我的消息</a>
                        </div>
                    </div>
                    <div class="dropdown">
                        <a href="#" class="dropbtn"><img src="images/bars.png" alt="">收藏中心</a>
                    </div>
                </ul>
            </div>
        </div>
        <div class="headerAdv">
            <a href=""><img src="images/首页/首页广告.png" style="width: 100%;" alt=""></a>
        </div>
        <div class="headerTitle">
            <div class="logo"><img src="images/logo.png" alt=""></div>
            <div class="title">
                <h1>建材一站式服务平台</h1>
            </div>
            <div class="location">
                <p>郑州站</p>
                <a href="">【城市切换】</a>
            </div>
            <div class="search">
                <span class="search-text">全站搜索</span>
                <input type="text" name="" id="" value="请输入关键字查询相关资料">
                <span class="searchbtn"><a href="#">搜索</a></span>
            </div>
        </div>
        <div class="headerbtn">
            <div class="dropdown" id="jcxg">
                <a href="buyMaterial.html" class="dropbtn" onclick=" var contract = 0;
                if (document.getElementById('contract1').style.color == 'grey' || document.getElementById('contract2').style
                    .color == 'grey')
                    {contract = 1};
                this.href = 'buyMaterial.html?contract=' + contract;">建材选购<img src="images/down2.png" alt=""
                        style="width: 18px;margin-left: 5px;" id="jcxgbtn"></a>
                <div class="dropdown-content" style="height: 350px;">
                    <div class="xd" id="htxd">
                        <span class="xd-title">合同下单</span>
                        <div style="margin-left: 10px;">
                            <span href="" class="choice" id="contract1">旭辉运河悦章</span>
                            <span href="" class="choice" id="contract2">旭辉运河悦章</span>
                        </div>
                    </div>
                    <div class="xd" id="ptxd">
                        <span class="xd-title">普通下单</span>
                        <div class="nj">
                            <img src="images/分类.png" alt=""
                                style="width: 30px;margin-left: 10px;display:inline-block;vertical-align: middle;">
                            <span
                                style="color: rgb(75, 145, 225);height: 30px;line-height:30px;display:inline-block;vertical-align: middle;">砂浆</span>
                        </div>
                        <div style="margin-left: 10px;">
                            <span href="" class="choice">水泥泥浆</span>
                            <span href="" class="choice">混合砂浆</span>
                            <span href="" class="choice">特种砂浆</span>
                            <br>
                            <span href="" class="choice">其他砂浆</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="changePage">
                <span href="" id='page1' style="color: rgb(75, 145, 225);
                border-bottom: 5px solid rgb(75, 145, 225)">首页</span>
                <span href="" id="page2">全部商品</span>
                <span href="" id="page3">平台服务</span>
                <span href="" id="page4">骆驼快讯</span>
                <span href="" id="page5">推广有礼</span>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="mainAdv">
            <img src="images/首页/首页宣传.png" alt="">
            <div class="mainAdvR">
                <img src="images/首页/首页宣传2.png" alt="">
                <div class="mainAdvR-text">
                    <div class="scrollText">
                        <ul>
                            <li>
                                <p>累计成交（吨）</p>
                                <h2>6548526</h2>
                            </li>
                            <li>
                                <p>入驻工地（家）</p>
                                <h2>999</h2>
                            </li>
                            <li>
                                <p>日砂浆产能（吨）</p>
                                <h2>65985</h2>
                            </li>
                        </ul>
                    </div>
                    <div class="mainAdv-btn">
                        <a style="background-color: rgb(190, 38, 38);cursor: pointer;" id="ljzc">立即注册</a>
                        <a id="msdl" style="cursor: pointer;">马上登录</a>
                    </div>
                    <div class="toutiao">
                        <a href="" class="toutiao-btn">头条</a>
                        <a href="" class="toutiao-showmore">查看更多</a>
                        <ul>
                            <li>
                                <span>头条</span>
                                <span class="toutiao-date">02-01</span>
                            </li>
                            <li>
                                <span>头条</span>
                                <span class="toutiao-date">02-01</span>
                            </li>
                            <li>
                                <span>头条</span>
                                <span class="toutiao-date">02-01</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="dongtai">
            <div class="download">
                <p>下载手机APP</p>
                <p style="font-size: 13px;color: grey;">随时随地下单接单</p>
                <img src="images/首页/QRcode.png" alt="" id="QRcode">
            </div>
            <div class="ywdt">
                <div class="ywdt-title">
                    <span style="font-size: 28px;padding: 10px;">业务动态</span>
                    <div class="ruzhu">
                        <img src="images/首页/盾牌.png" alt="">
                        <span style="color: rgb(190, 38, 38);">入驻平台，订单就来</span>
                        <span id="ljjr">立即加入</span>
                    </div>
                </div>
                <div class="ywdt-content">
                    <ul class="ywdt-contentL">
                        <li><img src="images/首页/圆点.png">恭喜旭辉运河悦章下料成功，<span>下料预拌抹灰砂浆100车</span></li>
                        <li><img src="images/首页/圆点.png">恭喜旭辉运河悦章下料成功，<span>下料预拌抹灰砂浆100车</span></li>
                        <li><img src="images/首页/圆点.png">恭喜旭辉运河悦章下料成功，<span>下料预拌抹灰砂浆100车</span></li>
                    </ul>
                    <ul class="ywdt-contentR">
                        <li><img src="images/首页/圆点.png">恭喜旭辉运河悦章下料成功，<span>下料预拌抹灰砂浆100车</span></li>
                        <li><img src="images/首页/圆点.png">恭喜旭辉运河悦章下料成功，<span>下料预拌抹灰砂浆100车</span></li>
                        <li><img src="images/首页/圆点.png">恭喜旭辉运河悦章下料成功，<span>下料预拌抹灰砂浆100车</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="recommend">
            <div id="ranking" class="card">
                <p class="cardTitle">排行榜</p>
                <img src="images/首页/热销榜.png" alt="" class="card-banner">
                <div class="rankingItem" id="good9">
                    <img src="images/首页/no1.png" alt="" class="no">
                    <img src="https://pic.imgdb.cn/item/6201231b2ab3f51d91199750.jpg" alt="" class="material-img">
                    <div class="rankingItem-detail">
                        <p class="mname">油漆</p>
                        <p class="mtype" style="color: #ccc;">DMP15</p>
                        <p class="price" style="color: rgb(190, 38, 38);">¥1000.00/吨</p>
                    </div>
                </div>
                <div class="rankingItem" id="good2">
                    <img src="images/首页/no2.png" alt="" class="no">
                    <img src="https://pic.imgdb.cn/item/620123832ab3f51d9119f045.jpg" alt="" class="material-img">
                    <div class="rankingItem-detail">
                        <p class="mname">钢板</p>
                        <p class="mtype" style="color: #ccc;">DMP15</p>
                        <p class="price" style="color: rgb(190, 38, 38);">¥1000.00/吨</p>
                    </div>
                </div>
                <div class="rankingItem" id="good12">
                    <img src="images/首页/no3.png" alt="" class="no">
                    <img src="https://pic.imgdb.cn/item/6201234e2ab3f51d9119c226.jpg" alt="" class="material-img">
                    <div class="rankingItem-detail">
                        <p class="mname">实木</p>
                        <p class="mtype" style="color: #ccc;">DMP15</p>
                        <p class="price" style="color: rgb(190, 38, 38);">¥1000.00/吨</p>
                    </div>
                </div>
            </div>
            <div id="wnjx" class="card">
                <p class="cardTitle">为您精选</p>
                <img src="images/首页/精选百款好货.png" alt="" class="card-banner">
                <div class="selectedItem" id="good11">
                    <img src="https://pic.imgdb.cn/item/6201215a2ab3f51d9117e01b.jpg" alt="">
                    <p class="mname">水泥</p>
                    <p class="price" style="color: rgb(190, 38, 38);">¥1000.00/吨</p>
                </div>
                <div class="selectedItem" id="good10">
                    <img src="https://pic.imgdb.cn/item/620121902ab3f51d91180c7a.jpg" alt="">
                    <p class="mname">沙子</p>
                    <p class="price" style="color: rgb(190, 38, 38);">¥1000.00/吨</p>
                </div>
                <div class="selectedItem" id="good8">
                    <img src="https://pic.imgdb.cn/item/620121c22ab3f51d911834c8.jpg" alt="">
                    <p class="mname">砖头</p>
                    <p class="price" style="color: rgb(190, 38, 38);">¥1000.00/吨</p>
                </div>
                <div class="selectedItem" id="good7">
                    <img src="https://pic.imgdb.cn/item/620121f12ab3f51d91185e6e.jpg" alt="">
                    <p class="mname">钢筋</p>
                    <p class="price" style="color: rgb(190, 38, 38);">¥1000.00/吨</p>
                </div>
                <div class="selectedItem" id="good5">
                    <img src="https://pic.imgdb.cn/item/620122082ab3f51d911875b3.jpg" alt="">
                    <p class="mname">木板</p>
                    <p class="price" style="color: rgb(190, 38, 38);">¥1000.00/吨</p>
                </div>
                <div class="selectedItem" id="good6">
                    <img src="https://pic.imgdb.cn/item/620122292ab3f51d911892f1.jpg" alt="">
                    <p class="mname">石材</p>
                    <p class="price" style="color: rgb(190, 38, 38);">¥1000.00/吨</p>
                </div>
            </div>
            <div id="tsfw" class="card">
                <p class="cardTitle">特色服务</p>
                <img src="images/首页/特色服务.png" alt="" class="card-banner">
                <div class="service">
                    <div class="serviceItem">
                        <img src="images/首页/物流服务.png" class="card-img" alt="">
                        <p>物流服务</p>
                    </div>
                    <div class="serviceItem">
                        <img src="images/首页/工程信息.png" class="card-img" alt="">
                        <p>工程信息</p>
                    </div>
                    <div class="serviceItem">
                        <img src="images/首页/信息价.png" class="card-img" alt="">
                        <p>信息价</p>
                    </div>
                    <div class="serviceItem">
                        <img src="images/首页/建材学院.png" class="card-img" alt="">
                        <p>建材学院</p>
                    </div>
                    <div class="serviceItem">
                        <img src="images/首页/全民经纪人.png" class="card-img" alt="">
                        <p>全民经纪人</p>
                    </div>
                    <div class="serviceItem">
                        <img src="images/首页/注册有礼.png" class="card-img" alt="">
                        <p>注册有礼</p>
                    </div class="serviceItem">
                </div>
            </div>
        </div>
        <div class="information">
            <div class="xxj">
                <p class="cardTitle" style="font-weight: 400;display: inline-block;">信息价</p>
                <span class="more">MORE>></span>
                <div style="width:540px;border-top: 1px solid #ccc;">
                    <table>
                        <tr style="padding: 8px;">
                            <td>产地</td>
                            <td>类型</td>
                            <td>名称</td>
                            <td>强度等级</td>
                            <td>单位</td>
                            <td>信息价</td>
                        </tr>
                        <tr>
                            <td>郑州</td>
                            <td>黑色及有色金属</td>
                            <td>热轧圆钢</td>
                            <td>6.5-8</td>
                            <td>吨</td>
                            <td>600.00</td>
                        </tr>
                        <tr>
                            <td>郑州</td>
                            <td>黑色及有色金属</td>
                            <td>热轧圆钢</td>
                            <td>6.5-8</td>
                            <td>吨</td>
                            <td>600.00</td>
                        </tr>
                        <tr>
                            <td>郑州</td>
                            <td>黑色及有色金属</td>
                            <td>热轧圆钢</td>
                            <td>6.5-8</td>
                            <td>吨</td>
                            <td>600.00</td>
                        </tr>
                        <tr>
                            <td>郑州</td>
                            <td>黑色及有色金属</td>
                            <td>热轧圆钢</td>
                            <td>6.5-8</td>
                            <td>吨</td>
                            <td>600.00</td>
                        </tr>
                        <tr>
                            <td>郑州</td>
                            <td>黑色及有色金属</td>
                            <td>热轧圆钢</td>
                            <td>6.5-8</td>
                            <td>吨</td>
                            <td>600.00</td>
                        </tr>
                        <tr>
                            <td>郑州</td>
                            <td>黑色及有色金属</td>
                            <td>热轧圆钢</td>
                            <td>6.5-8</td>
                            <td>吨</td>
                            <td>600.00</td>
                        </tr>
                        <tr>
                            <td>郑州</td>
                            <td>黑色及有色金属</td>
                            <td>热轧圆钢</td>
                            <td>6.5-8</td>
                            <td>吨</td>
                            <td>600.00</td>
                        </tr>
                        <tr>
                            <td style="border-bottom:none">郑州</td>
                            <td style="border-bottom:none">黑色及有色金属</td>
                            <td style="border-bottom:none">热轧圆钢</td>
                            <td style="border-bottom:none">6.5-8</td>
                            <td style="border-bottom:none">吨</td>
                            <td style="border-bottom:none">600.00</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="gcxx">
                <p class="cardTitle" style="font-weight: 400;display: inline-block;">工程信息</p>
                <span class="more">MORE>></span>
                <div style="width: 650px;border-top: 1px solid #ccc;">
                    <ul>
                        <li class="gcxxItem"><span style="margin-right: 0;">【杭州市】</span><span
                                style="color: grey;margin-left: 0;">留泗路（之江界~之江路）一期提升改造工程监理</span><img
                                src="images/首页/荐.png" alt=""><span style="float: right;">2018-11-05</span></li>
                        <li class="gcxxItem"><span style="margin-right: 0;">【杭州市】</span><span
                                style="color: grey;margin-left: 0;">留泗路（之江界~之江路）一期提升改造工程监理</span><img
                                src="images/首页/荐.png" alt=""><span style="float: right;">2018-11-05</span></li>
                        <li class="gcxxItem"><span style="margin-right: 0;">【杭州市】</span><span
                                style="color: grey;margin-left: 0;">留泗路（之江界~之江路）一期提升改造工程监理</span><img
                                src="images/首页/荐.png" alt=""><span style="float: right;">2018-11-05</span></li>
                        <li class="gcxxItem"><span style="margin-right: 0;">【杭州市】</span><span
                                style="color: grey;margin-left: 0;">留泗路（之江界~之江路）一期提升改造工程监理</span><img
                                src="images/首页/荐.png" alt=""><span style="float: right;">2018-11-05</span></li>
                        <li class="gcxxItem"><span style="margin-right: 0;">【杭州市】</span><span
                                style="color: grey;margin-left: 0;">留泗路（之江界~之江路）一期提升改造工程监理</span><img
                                src="images/首页/荐.png" alt=""><span style="float: right;">2018-11-05</span></li>
                        <li class="gcxxItem"><span style="margin-right: 0;">【杭州市】</span><span
                                style="color: grey;margin-left: 0;">留泗路（之江界~之江路）一期提升改造工程监理</span><img
                                src="images/首页/荐.png" alt=""><span style="float: right;">2018-11-05</span></li>
                        <li class="gcxxItem"><span style="margin-right: 0;">【杭州市】</span><span
                                style="color: grey;margin-left: 0;">留泗路（之江界~之江路）一期提升改造工程监理</span><img
                                src="images/首页/荐.png" alt=""><span style="float: right;">2018-11-05</span></li>
                    </ul>
                </div>
            </div>
            <div class="ptfwnr">
                <p class="cardTitle" style="font-weight: 400;display: inline-block;">平台服务内容</p>
                <span class="more">MORE>></span>
                <div style="width: 324px;border-top: 1px solid #ccc;">
                    <img src="images/首页/建材.png" alt="">
                    <img src="images/首页/一心一意.png" alt="">
                    <img src="images/首页/随意查找.png" alt="">
                </div>
            </div>
            <div class="jcxy">
                <p class="cardTitle" style="font-weight: 400;display: inline-block;">建材学院</p>
                <span class="more">MORE>></span>
                <div style="width: 540px;border-top: 1px solid #ccc;">
                    <img src="images/首页/建材学院宣传图.png" style="width: 520px;margin: 5px 10px;" alt="">
                </div>
            </div>
            <div class="zmpp">
                <p class="cardTitle" style="font-weight: 400;display: inline-block;">知名品牌</p>
                <span class="more">MORE>></span>
                <div style="width: 300px;border-top: 1px solid #ccc;">
                    <img src="images/首页/合作品牌.png" style="width: 250px;margin: 5px 25px;" alt="">
                </div>
            </div>
            <div class="qmjjr">
                <p class="cardTitle" style="font-weight: 400;display: inline-block;">全民经纪人</p>
                <span class="more">MORE>></span>
                <div style="width: 350px;border-top: 1px solid #ccc;">
                    <img src="images/首页/百万悬赏.png" style="width: 300px;margin: 12px 25px;" alt="">
                </div>
            </div>
            <div class="zixun">
                <p class="cardTitle" style="font-weight: 400;display: inline-block;">资讯中心</p>
                <div class="changePage2">
                    <span href="" id='page6' style="color: rgb(75, 145, 225);
                    border-bottom: 5px solid rgb(75, 145, 225)">建材资讯</span>
                    <span href="" id="page7">建材规范</span>
                    <span href="" id="page8">建材头条</span>
                </div>
                <div class="zixunBox">
                    <img src="images/首页/建材资讯1.png" alt=""
                        style="height: 320px;margin:10px;vertical-align: middle;cursor: pointer;">
                    <div class="jczx" style="width: 880px;height: 320px;display: inline-block;vertical-align: middle;">
                        <img src="images/首页/建材资讯2.png" alt="">
                        <img src="images/首页/建材资讯2.png" alt="">
                        <img src="images/首页/建材资讯2.png" alt="">
                        <img src="images/首页/建材资讯2.png" alt="">
                        <img src="images/首页/建材资讯2.png" alt="">
                        <img src="images/首页/建材资讯2.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="link">
            <img src="images/首页/footer.png" alt="" style="position: absolute;right: 0;height: 200px;">
            <div class="linkItem">
                <img src="images/问号.png" alt="">
                <span>新手指南</span>
                <a href="" style="display: block;">业务流程</a>
                <a href="" style="display: block;">用户协议</a>
                <a href="" style="display: block;">帮助中心</a>
            </div>
            <div class="linkItem" style="left:270px" onclick="window.location='page/gdzx.html'">
                <img src="images/问号.png" alt="">
                <span>工地中心</span>
                <a href="" style="display: block;">工地入口</a>
                <a href="" style="display: block;">一键下单</a>
            </div>
            <div class="linkItem" style="left:540px">
                <img src="images/问号.png" alt="">
                <span>OEM中心</span>
                <a href="" style="display: block;">OEM入口</a>
                <a href="" style="display: block;">立即入驻</a>
            </div>
            <div class="linkItem" style="left:810px">
                <img src="images/问号.png" alt="">
                <span>企业资质</span>
                <a href="" style="display: block;">关于我们</a>
                <a href="" style="display: block;">联系我们</a>
            </div>
        </div>
        <div class="link2">
            <span style="margin-left: 5px;">友情链接</span>
            <a href="">萍乡建材市场</a><a href="">九江建材市场</a><a href="">南昌建材市场</a><a href="">吉安建材市场</a><a href="">加工中心价格</a><a
                href="">加工中心</a><a href="">机械零部件加工</a><a href="">机械配件加工</a><a href="">铁艺加工厂</a><a href="">铁艺围墙预算</a><a
                href="">铁艺围栏预算</a><a href="">铁艺护栏预算</a><a href="">不锈钢栏杆预算</a><a href="">南昌建材网</a><a
                href="">不锈钢宣传牌预算</a><a href="">不锈钢雨棚预算</a><a href="">不锈钢护栏预算</a><a href="">不锈钢加工</a><a
                href="">九江建材网</a><a href="">铁艺护栏</a><a href="">金属加工</a><a href="">不锈钢防盗网</a><a href="">不锈钢楼梯扶手预算</a><a
                href="">吉安建材网</a><a href="">抚州建材网</a><a href="">建材市场</a><a href="">赣州建材网</a><a href="">新余建材市场</a><a
                href="">铁艺大门</a><a href="">鹰潭建材网</a><a href="">铁艺花架</a><a href="">宜春建材网</a><a href="">新余建材网</a><a
                href="">不锈钢</a><a href="">鹰潭建材市场</a><a href="">不锈钢价格</a><a href="">不锈钢护栏</a><a href="">不锈钢楼梯扶手</a><a
                href="">铁艺围栏</a><a href="">景德镇建材市场</a><a href="">铁艺床</a><a href="">南昌不锈钢制品厂</a><a href="">宜春建材市场</a><a
                href="">南昌铁艺制品厂</a><a href="">抚州建材市场</a><a href="">上饶建材市场</a><a href="">景德镇建材网</a>
        </div>
    </div>
    <script src="lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="js/lay-config.js?v=2.0.0" charset="utf-8"></script>
    <script>
        function clearCookie() {
            let paths = ['/']
            let domain = []
            let host = location.hostname
            domain.push(host)
            if (host.indexOf('www') > -1) {
                domain.push(host.substr(3))
            }
            let keys = document.cookie.match(/[^ =;]+(?=\=)/g)

            function deleteCookie(name, path, domain) {
                let keys = document.cookie.match(/[^ =;]+(?=\=)/g) || []
                if (keys.indexOf(name) < 0) return
                document.cookie = name + '=' + ((path) ? ';path=' + path : '') + ((domain) ? ';domain=' + domain : '') +
                    ';expires=Thu,01-Jan-1970 00:00:01 GMT';
            }
            // 确保paths、domain、keys都不相同，都要进行清除
            paths.forEach(p => {
                domain.forEach(d => {
                    keys.forEach(k => {
                        deleteCookie(k, p, d)
                    })
                })
            })
        }
        layui.use(['jquery', 'layer'], function () {
            var $ = layui.jquery,
                layer = layui.layer;
            var remember = 0; //是否记住密码
            var password = '';
            var username = '';
            $(function () {
                var $this = $(".scrollText");
                var scrollTimer;
                $this.hover(function () {
                    clearInterval(scrollTimer);
                }, function () {
                    scrollTimer = setInterval(function () {
                        scrollContent($this);
                    }, 2000);
                }).trigger("mouseout");
            });

            function scrollContent(obj) {
                var $self = obj.find("ul:first");
                var lineHeight = $self.find("li:first").height(); //获取行高
                $self.animate({
                    "margin-top": -lineHeight + "px"
                }, 1000, function () {
                    $self.css({
                        "margin-top": "0px"
                    }).find("li:first").appendTo($self); //appendTo能直接移动元素而不是复制，被appendto的元素位置发生变化
                })
            }
            $('body').ready(function () {
                var strCookie = document.cookie;
                if (strCookie != '') {
                    var arrCookie = strCookie.split("; ");
                    for (i = 0; i < arrCookie.length; i++) {
                        var arr = arrCookie[i].split("=");
                        if (arr[0] == 'username')
                            username = arr[1];
                        else if (arr[0] == 'remember')
                            remember = 1;
                        else if (arr[0] == 'password')
                            password = arr[1];
                    }
                }
                if (username != '') {
                    $('.beforeLogin').css('display', 'none');
                    $('.afterLogin').css('display', 'block');
                    document.getElementById('username').innerText = username;
                } else {
                    $('.beforeLogin').css('display', 'block');
                    $('.afterLogin').css('display', 'none');
                }
            })
            // $('#dropdown1').on('click', function () {
            //     if ($('#dropdown-content1').css('display') == 'none')
            //         $('#dropdown-content1').css('display', 'block');
            //     else
            //         $('#dropdown-content1').css('display', 'none');
            // })
            // $('#dropdown2').on('click', function () {
            //     if ($('#dropdown-content2').css('display') == 'none')
            //         $('#dropdown-content2').css('display', 'block');
            //     else
            //         $('#dropdown-content2').css('display', 'none');
            // })
            $('#exit').on('click', function () {
                $('.beforeLogin').css('display', 'block');
                $('.afterLogin').css('display', 'none');
                clearCookie();
                if (remember)
                    document.cookie = "remember=1";
                if (password != '')
                    document.cookie = "password=" + password;
                if (username != '')
                    document.cookie = "username=" + username;
            })
            $('.search input').on('focus', function () {
                $(this).val('');
                $(this).css('color', 'black');
            })
            $('.search input').on('blur', function () {
                if ($(this).val() == '') {
                    $(this).val('请输入关键字查询相关资料');
                    $(this).css('color', '#ccc');
                } else {
                    $(this).css('color', 'black');
                }

            })
            $('.choice').on('click', function () {
                if ($(this).css('color') == 'rgb(156, 156, 156)') {
                    $(this).css('color', 'grey');
                    $(this).css('border', '1px solid grey');
                } else {
                    $(this).css('color', '#ccc');
                    $(this).css('border', '1px solid #ccc');
                }
            })
            $('.choice').on('mouseover', function () {
                if ($(this).css('color') != 'rgb(128, 128, 128)') {
                    $(this).css('color', 'rgb(156, 156, 156)');
                    $(this).css('border', '1px solid rgb(156, 156, 156)');
                }
            })
            $('.choice').on('mouseout', function () {
                if ($(this).css('color') != 'rgb(128, 128, 128)') {
                    $(this).css('color', '#ccc');
                    $(this).css('border', '1px solid #ccc');
                }
            })
            $('.changePage span').on('click', function () {
                for (i = 1; i < 6; i++) {
                    $('#page' + i).css('color', 'black');
                    $('#page' + i).css('border', 'none');
                }
                $(this).css('color', 'rgb(75, 145, 225)');
                $(this).css('border-bottom', '5px solid rgb(75, 145, 225)');
            })
            $('.changePage2 span').on('click', function () {
                for (i = 6; i < 9; i++) {
                    $('#page' + i).css('color', 'black');
                    $('#page' + i).css('border', 'none');
                }
                $(this).css('color', 'rgb(75, 145, 225)');
                $(this).css('border-bottom', '5px solid rgb(75, 145, 225)');
            })
            $('#msdl').on('click', function () {
                if ($('.afterLogin').css('display') == 'block')
                    layer.msg('用户已登录！');
                else
                    window.location = 'login.html';
            })
            $('#ljzc').on('click', function () {
                if ($('.afterLogin').css('display') == 'block')
                    layer.msg('用户已登录！');
                else
                    window.location = 'register.html';
            })
            $('#ljjr').on('click', function () {
                layer.alert('请拨打10086联系管理员开通账号');
            })
            $('.rankingItem,.selectedItem').on('click', function () {
                var id = $(this).attr('id');
                var mid = id.substr(4, id.length);
                window.location = 'materialDetail.html?mid=' + mid + '&contract=0';
            })
            $('.cart').on('click', function () {
                window.location = 'cart.html';
            })
            $('#showQR').on('click', function () {
                var src = $(this).attr('src');
                layer.open({
                    type: 1,
                    title: '手机APP二维码',
                    content: '<img src="images/首页/QRcode.png" style="margin:25px;width:200px"></img>'
                });
            })
        })
    </script>
</body>

</html>